import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Button, Tools, Icon, Modal  } from 'weaver-mobile';
import { Form } from 'weaver-mobile-page';
import { toJS } from 'mobx';
import NoData from '../../../public/NoData';
import MeetingUtil from '../../../util/meetingUtil';
const getLabel = Tools.getLabel;

@inject('viewMeetingStore')
@withRouter
@observer
class MeetingSeatData extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            addtopic: true
        };
      }
    componentDidMount() {
      this.getDetail();
    }

    componentWillReceiveProps (nextProps) {
      const {getBaseDetail,setState} = this.props.viewMeetingStore;
      if(getBaseDetail){
        this.getDetail();
        setState({getBaseDetail:false})
      }
    }

    getDetail = (p={})=>{
      const { getSeatInfo, meetingId, type, setState } = this.props.viewMeetingStore;
        //考虑到刷新的时候
        let typeTemp = type?type:sessionStorage.getItem('type')
        let meetingIdTemp = meetingIdTemp?meetingIdTemp:sessionStorage.getItem('meetingId')
        setState({type:typeTemp,meetingId:meetingIdTemp})
        const params = {
          meetingId:meetingIdTemp,
          viewType:1,
          ismobile:1,
          ...p,
        }
        getSeatInfo(params)
    }

    onChange = (c,v)=>{
      this.getDetail({address:v})
    }

    getFields = ()=>{
      const { seatForm } = this.props.viewMeetingStore;
      const { isInit ,conditioninfo } = seatForm;
      const groups = [];
      const fields = [];
      let values = seatForm.formParams
      isInit && conditioninfo.length!==0 && conditioninfo.forEach((group) => {
        group.items.forEach((field) => {
          if(field.domkey[0] == 'address'){
            fields.push(<Form.Item
              key={field.domkey.join('__')}
              form={seatForm}
              fieldConfig={field}
              onChange={this.onChange.bind(this)}
              
            />);
          }
        })
        groups.push(<div className={'meetingSeatAddressSelect'}>
        <div>
          {fields}
        </div>
      </div>);
      })
      return groups;
    }

    getAddresssymbol = ()=>{
      const { fieldList } = this.props.viewMeetingStore;
      const baseHeight = MeetingUtil.getBaseHeight();
      let screenColor = '';
      let screenName = '';
      let clientWidth = document.body.clientWidth
      let fieldListDiv = fieldList&&fieldList.length>0&&fieldList.map((key,index)=>{
        let cssparams = {};
        if(key.key === '-1'){
          cssparams = {width:45*baseHeight,textAlign:'center',color:'#fff'};
          screenColor = key.bgcolor
          screenName = key.showname
        }
        let selfIcon = key.key==='-3'?<div className={'selfSymbolIcon'}><Icon type='me' style={{width:13*baseHeight,paddingLeft:4*baseHeight,color:'#ffffff'}} size='sm'/></div>:''
        return (<div className={'meetingSeatSymbol'}>{key.key!=='-3'&&<div className={'symbolLabel'} style={{backgroundColor:key.bgcolor,...cssparams}}  >{key.key==='-1'?key.showname:''}</div>}
        {selfIcon}<div className={'symbolName'} ><span >{key.showname}</span></div></div>)
      })
      return (<div className={'meetingSeatSymbolDiv'}>
        {fieldListDiv}
        {<div className={'screenShow'} style={{backgroundColor:screenColor,width:clientWidth}}>{screenName}</div>}
      </div>)
    }

    getExchangeLabel = (label)=>{
      var res = label;
			if (label && typeof (label) == 'string') {
				var L = label.split('_');
				if (L.length == 2 ) {
					res = L[0] + getLabel(507059,'排') + L[1] + getLabel(507060,'座');
				}
			}
			return res;

    }

    getMeetingSeatInfo = ()=>{
      const { seatDatas, seatConfMap,definedColor,selfId, hrmNameMap, styleType } = this.props.viewMeetingStore;
      const baseHeight = MeetingUtil.getBaseHeight();
      let isTripTable = styleType == '4';
      let seatDatasInfo = [];
      let seatInfoHtml = '';
      if(seatDatas.length>0){
        seatDatasInfo = seatDatas&&seatDatas[0];
      }else{
        seatDatasInfo = seatConfMap&&seatConfMap[0];
      }
      let clientHeight = document.body.clientHeight
      if(seatDatasInfo&&seatDatasInfo.length>0){
        let rowInfoWidth = seatDatasInfo[0].length;
        let colInfoWidth = seatDatasInfo.length;
        let selfIconCss = {
          position:'relative',
          width:13*baseHeight,
          color:'#ffffff',
        }
        const symbolHeight = document.getElementById('meetingSeatSymbolContent')&&document.getElementById('meetingSeatSymbolContent').offsetHeight || 0;
        let selfIcon = <Icon type='me' style={{...selfIconCss}} size='sm'/>
        seatInfoHtml = <div className={'meetingSeatInfoContent'} style={{height:clientHeight - 3*47 *baseHeight - symbolHeight - 10*baseHeight}}>
        <div className={isTripTable ? 'seatInfoContentCanvas' : 'seatRectangle'} style={{width:rowInfoWidth*baseHeight*75 - 10}}>
        {seatDatasInfo.map((rowInfo,index)=>{
          let marginTop = index === 0 ? { marginTop:0 } : {};
          let stripStyle = isTripTable ? { backgroundColor: '#dcdcdc' } : {};
          
          // let stripStyle =  {};
          return (
            <div className={'seatInfoRowInfo'} style={{ ...marginTop, width:rowInfoWidth*baseHeight*75 }}>
              {rowInfo.map((seatInfo,index)=>{
                const show = seatInfo.isPassageway?false:seatInfo.map==='e'?true:false;
                // console.log(show)
                return (
                  show?<div className={'seatInfo'} style={{backgroundColor:seatInfo.bgcolor?seatInfo.bgcolor:definedColor,color:seatInfo.color}}>
                  <div className={'seatlabel'}><span>{
                    seatInfo.isEditLabel&&seatInfo.isEditLabel ? 
                      seatInfo.hrmid === 'outsideHrm' ? seatInfo.showname : (hrmNameMap && typeof(hrmNameMap[seatInfo.hrmid])==='undefined' ? seatInfo.seatLabel_def : hrmNameMap[seatInfo.hrmid])
                    :
                      seatInfo.showname ? seatInfo.showname : this.getExchangeLabel(seatInfo.seatLabel)
                  }</span></div>
                  {parseInt(seatInfo.hrmid,10) ===selfId?<div className={'selfIcon'}>{selfIcon}</div>:''}
                </div>:<div className={'seatInfo'} style={{backgroundColor:'#fff', ...stripStyle}}></div>
                
                )
              })}
            </div>
          )
        })}
        {isTripTable && <div className={"tripCoverLayer"}></div>}
        </div>
        </div>
      }
      return seatInfoHtml;
    }

    render() {
      const { seatForm:{isInit} ,btns} = this.props.viewMeetingStore;
        return (
          <div className={btns&&btns.length===1&&btns[0]==='doViewLog'?"tabContentHeight2":'tabContentHeight'}>
            <div style={{height:`100%`}} className={'meetingSeatContain'}>
              <div className={'meetingSeatAddressContent'}>
              {isInit && this.getFields()}
              </div>
              <div className={'meetingSeatSymbolContent'} id={'meetingSeatSymbolContent'}>
                {this.getAddresssymbol()}
              </div>
                {this.getMeetingSeatInfo()}
            </div>
          </div>
        )
    }
}

export default MeetingSeatData;